<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="../static/js/layer/layer.js"></script>
    <script src="../static/editor.md/examples/js/jquery.min.js"></script>
<!--    <script src="https://www.layuicdn.com/layui/layui.js"></script>-->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="../static/js/Timetables.min.js"></script>
    <title>大学课表</title>
    <style>
        #coursesTable {
            padding: 15px 10px;
        }

        .Courses-head {
            background-color: #edffff;
        }

        .Courses-head > div {
            text-align: center;
            font-size: 14px;
            line-height: 28px;
            font-family: myFont;
        }

        .left-hand-TextDom, .Courses-head {
            background-color: #f2f6f7;
        }

        .Courses-leftHand {
            background-color: #f2f6f7;
            font-size: 12px;
        }

        .Courses-leftHand .left-hand-index {
            color: #9c9c9c;
            /*margin-bottom: 4px !important;*/
            font-size: 15px;
            font-family: myFont;
        }

        .Courses-leftHand .left-hand-name {
            color: #666;
            font-size: 3px;
            font-family: myFont;
        }

        .Courses-leftHand p {
            text-align: center;
            font-weight: 900;
        }

        .Courses-head > div {
            border-left: none !important;
        }

        .Courses-leftHand > div {
            padding-top: 5px;
            border-bottom: 1px dashed rgb(219, 219, 219);
        }

        .Courses-leftHand > div:last-child {
            border-bottom: none !important;
        }

        .left-hand-TextDom, .Courses-head {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        }

        .Courses-content > ul {
            border-bottom: 1px dashed rgb(219, 219, 219);
            box-sizing: border-box;
            font-family: myFont;
        }

        .Courses-content > ul:last-child {
            border-bottom: none !important;
        }

        .highlight-week {
            color: #02a9f5 !important;
        }

        .Courses-content li {
            text-align: center;
            color: #666666;
            font-size: 14px;
            line-height: 50px;
            font-family: myFont;
        }

        .Courses-content li span {
            padding: 6px 2px;
            box-sizing: border-box;
            line-height: 18px;
            border-radius: 4px;
            white-space: normal;
            word-break: break-all;
            cursor: pointer;
            font-family: myFont;
        }

        .grid-active {
            z-index: 9999;
        }

        .grid-active span {
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        }
    </style>
    <style>
        @font-face {
            font-family: myFont;
            src: url("../static/fonts/字体视界-小南同学.ttf")
        }

        .layui-layer-content {
            font-family: myFont;
            /*font-family: 字体视界-小南同学;*/
        }
    </style>
</head>
<body>
<div></div>
<div id="coursesTable"></div>
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label"></label>
        <button style="font-family: myFont" onclick="showSample()" type="button" class="layui-btn layui-btn-primary"
                id="SAMPLE">样例
        </button>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label"></label>
        <button style="font-family: myFont" onclick="lastWeek()" type="button" class="layui-btn" id="LAST-WEEK">上一周
        </button>
    </div>
    <div class="layui-inline">
        <label style="font-family: myFont" id="currWeek" class="layui-form-label">第1周</label>
    </div>
    <div class="layui-inline">
        <button style="font-family: myFont" onclick="nextWeek()" type="button" class="layui-btn" id="NEXT-WEEK">下一周
        </button>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label"></label>
        <button style="font-family: myFont" onclick="returnCurrWeek()" type="button" class="layui-btn layui-btn-primary"
                id="RESET">回到当前周
        </button>
    </div>
</div>
</body>
<script>
    var courseScheduleAll, TCNameInfo, lessonDateInfo, TCStartDateInfo, TCEndDateInfo;
    // var courseList, TCNameInfoList, lessonDateInfoList, TCStartDateList, TCEndDateList;
    var week, day, courseType, Timetable;
    var teacherID = "20178127";
    var defaultPage = 5;
    page = 0;
    renderCourseSchedule();
    function getCourseScheduleInfo() {
        $.ajax({
            type: "post",
            url: '/teachAffairManagementForTeacher/getCourseScheduleJSON',
            data: {
                // 'teacherID': teacherID
            },
            async: false,
            traditional: true, //是否使用传统的方式浅层序列化,若有数组参数或对象参数需要设置true!!!!!!
            dataType: "json",
            success: function (returnData) {
                obj = returnData;
                courseScheduleAll = obj['courseSchedule'];
                TCNameInfo = obj['TCNameInfo'];
                lessonDateInfo = obj['lessonDateInfo'];
                TCStartDateInfo = obj['TCStartDateInfo'];
                TCEndDateInfo = obj['TCEndDateInfo'];
                console.log(obj);
                console.log(typeof (lessonDateInfo.slice(0, 7)));
                layer.closeAll('loading');  // 关闭加载层
                if (obj['code'] === 1) {
                    layer.msg('获取成功', {
                        icon: 6,
                        time: 1000, //1s后自动关闭
                        // btn: ['确定']
                    }, function () {
                        parent.layer.closeAll();
                    });
                } else {
                    layer.msg('获取失败', {icon: 5});
                }
            },
            error: function () {
                layer.closeAll('loading');  // 关闭加载层
                alert("false");
            }
        });
    }

    function selectWeekIndex(week) {
        switch (week) {
            case "周一":
                return 0;
            case "周二":
                return 1;
            case "周三":
                return 2;
            case "周四":
                return 3;
            case "周五":
                return 4;
            case "周六":
                return 5;
            case "周日":
                return 6;
        }
    }

    function renderCourseSchedule() {
        getCourseScheduleInfo();
        layer.load(1);
        page = defaultPage;
        var start = page * 7, end = Math.min(7 + page * 7, Math.min(7 + page * 7, courseScheduleAll.length));
        courseList = courseScheduleAll.slice(start, end);
        TCNameInfoList = TCNameInfo.slice(start, end);
        lessonDateInfoList = lessonDateInfo.slice(start, end);
        TCStartDateList = TCStartDateInfo.slice(start, end);
        TCEndDateList = TCEndDateInfo.slice(start, end);
        console.log(courseList);
        week = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        day = new Date().getDay();
        courseType = [
            [{index: '第1节', name: '08:30~09:15'}, 1],
            [{index: '第2节', name: '09:25~10:10'}, 1],
            [{index: '第3节', name: '10:30~11:15'}, 1],
            [{index: '第4节', name: '11:25~12:10'}, 1],
            [{index: '第5节', name: '13:30~14:15'}, 1],
            [{index: '第6节', name: '14:25~15:10'}, 1],
            [{index: '第7节', name: '15:20~16:05'}, 1],
            [{index: '第8节', name: '16:25~17:10'}, 1],
            [{index: '第9节', name: '17:20~18:05'}, 1],
            [{index: '第10节', name: '19:00~19:45'}, 1],
            [{index: '第11节', name: '19:55~20:40'}, 1],
            [{index: '第12节', name: '20:50~21:35'}, 1]
        ];
        // 实例化(初始化课表)
        Timetable = new Timetables({
            el: '#coursesTable',
            timetables: courseList,
            week: week,
            timetableType: courseType,
            highlightWeek: day,
            gridOnClick: function (e) {
                const row = e.index - 1;
                const col = selectWeekIndex(e.week);
                const courseName = courseList[col][row];
                const teachClassName = TCNameInfoList[col][row];
                const lessonDate = lessonDateInfoList[col][row];
                const teachClassStartDate = TCStartDateList[col][row];
                const teachClassEndDate = TCEndDateList[col][row];
                if (courseName === '') {
                    layer.alert("无课程信息"
                        , {
                            icon: 2
                            , skin: 'layui-layer-lan'
                            // , skin: 'layui-layer-molv'
                            , area: ['400px', '200px']
                            , anim: 1
                        });
                    return;
                }
                // alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
                layer.alert(
                    "<p style='text-align: left'>"
                    // + "<span style=\"font-family: 字体视界-小南同学;\">"
                    + "<br>课程名：" + courseName + "<br>"
                    + "教学班名：" + teachClassName + "<br>"
                    + "课程日期：" + lessonDate + "<br>"
                    + "课程时间：" + (courseType[e.index - 1][0]['name']).split("~")[0] + "\~"
                    + (courseType[e.index + e.length - 2][0]['name']).split("~")[1] + "<br>"
                    + "教学班开始时间：" + teachClassStartDate + "<br>"
                    + "教学班结束时间：" + teachClassEndDate
                    // + "</span>"
                    + "</p>", {
                        icon: 1
                        , skin: 'layui-layer-lan'
                        // , skin: 'layui-layer-molv'
                        , area: ['400px', '320px']
                        , anim: 1
                    });
                console.log(e);
                console.log(week.indexOf(e.week));
            },
            styles: {
                leftHandWidth: 100,
                Gheight: 34
            }
        });
        setPageNumber(page);
    }

    function lastWeek() {
        page = Math.max(0, page - 1);
        var start = page * 7, end = 7 + page * 7;
        setPageNumber(page);
        courseList = courseScheduleAll.slice(start, end);
        TCNameInfoList = TCNameInfo.slice(start, end);
        lessonDateInfoList = lessonDateInfo.slice(start, end);
        TCStartDateList = TCStartDateInfo.slice(start, end);
        TCEndDateList = TCEndDateInfo.slice(start, end);
        Timetable.setOption({
            timetables: courseList,
            week: week,
            // styles: {
            //     palette: ['#dedcda', '#ff4081']
            // },
            timetableType: courseType,
            gridOnClick: function (e) {
                const row = e.index - 1;
                const col = selectWeekIndex(e.week);
                const courseName = courseList[col][row];
                const teachClassName = TCNameInfoList[col][row];
                const lessonDate = lessonDateInfoList[col][row];
                const teachClassStartDate = TCStartDateList[col][row];
                const teachClassEndDate = TCEndDateList[col][row];
                if (courseName === '') {
                    layer.alert("无课程信息"
                        , {
                            icon: 2
                            , skin: 'layui-layer-lan'
                            // , skin: 'layui-layer-molv'
                            , area: ['400px', '200px']
                            , anim: 1
                        });
                    return;
                }
                // alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
                layer.alert(
                    "<p style='text-align: left'>"
                    // + "<span style=\"font-family: 字体视界-小南同学;\">"
                    + "<br>课程名：" + courseName + "<br>"
                    + "教学班名：" + teachClassName + "<br>"
                    + "课程日期：" + lessonDate + "<br>"
                    + "课程时间：" + (courseType[e.index - 1][0]['name']).split("~")[0] + "\~"
                    + (courseType[e.index + e.length - 2][0]['name']).split("~")[1] + "<br>"
                    + "教学班开始时间：" + teachClassStartDate + "<br>"
                    + "教学班结束时间：" + teachClassEndDate
                    // + "</span>"
                    + "</p>", {
                        icon: 1
                        , skin: 'layui-layer-lan'
                        // , skin: 'layui-layer-molv'
                        , area: ['400px', '320px']
                        , anim: 1
                    });
                console.log(e);
                console.log(week.indexOf(e.week));
            },
        });
    }

    function nextWeek() {
        page = Math.min(Math.ceil(courseScheduleAll.length / 7) - 1, page + 1);
        var start = page * 7, end = Math.min(7 + page * 7, Math.min(7 + page * 7, courseScheduleAll.length));
        setPageNumber(page);
        courseList = courseScheduleAll.slice(start, end);
        TCNameInfoList = TCNameInfo.slice(start, end);
        lessonDateInfoList = lessonDateInfo.slice(start, end);
        TCStartDateList = TCStartDateInfo.slice(start, end);
        TCEndDateList = TCEndDateInfo.slice(start, end);
        Timetable.setOption({
            timetables: courseList,
            week: week,
            // styles: {
            //     palette: ['#dedcda', '#ff4081']
            // },
            timetableType: courseType,
            gridOnClick: function (e) {
                const row = e.index - 1;
                const col = selectWeekIndex(e.week);
                const courseName = courseList[col][row];
                const teachClassName = TCNameInfoList[col][row];
                const lessonDate = lessonDateInfoList[col][row];
                const teachClassStartDate = TCStartDateList[col][row];
                const teachClassEndDate = TCEndDateList[col][row];
                if (courseName === '') {
                    layer.alert("无课程信息"
                        , {
                            icon: 2
                            , skin: 'layui-layer-lan'
                            // , skin: 'layui-layer-molv'
                            , area: ['400px', '200px']
                            , anim: 1
                        });
                    return;
                }
                // alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
                layer.alert(
                    "<p style='text-align: left'>"
                    // + "<span style=\"font-family: 字体视界-小南同学;\">"
                    + "<br>课程名：" + courseName + "<br>"
                    + "教学班名：" + teachClassName + "<br>"
                    + "课程日期：" + lessonDate + "<br>"
                    + "课程时间：" + (courseType[e.index - 1][0]['name']).split("~")[0] + "\~"
                    + (courseType[e.index + e.length - 2][0]['name']).split("~")[1] + "<br>"
                    + "教学班开始时间：" + teachClassStartDate + "<br>"
                    + "教学班结束时间：" + teachClassEndDate
                    // + "</span>"
                    + "</p>", {
                        icon: 1
                        , skin: 'layui-layer-lan'
                        // , skin: 'layui-layer-molv'
                        , area: ['400px', '320px']
                        , anim: 1
                    });
                console.log(e);
                console.log(week.indexOf(e.week));
            },
        });
    }

    function returnCurrWeek() {
        page = defaultPage;
        var start = page * 7, end = Math.min(7 + page * 7, Math.min(7 + page * 7, courseScheduleAll.length));
        setPageNumber(page);
        courseList = courseScheduleAll.slice(start, end);
        TCNameInfoList = TCNameInfo.slice(start, end);
        lessonDateInfoList = lessonDateInfo.slice(start, end);
        TCStartDateList = TCStartDateInfo.slice(start, end);
        TCEndDateList = TCEndDateInfo.slice(start, end);
        Timetable.setOption({
            timetables: courseList,
            week: week,
            // styles: {
            //     palette: ['#dedcda', '#ff4081']
            // },
            timetableType: courseType,
            gridOnClick: function (e) {
                const row = e.index - 1;
                const col = selectWeekIndex(e.week);
                const courseName = courseList[col][row];
                const teachClassName = TCNameInfoList[col][row];
                const lessonDate = lessonDateInfoList[col][row];
                const teachClassStartDate = TCStartDateList[col][row];
                const teachClassEndDate = TCEndDateList[col][row];
                if (courseName === '') {
                    layer.alert("无课程信息"
                        , {
                            icon: 2
                            , skin: 'layui-layer-lan'
                            // , skin: 'layui-layer-molv'
                            , area: ['400px', '200px']
                            , anim: 1
                        });
                    return;
                }
                // alert(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节');
                layer.alert(
                    "<p style='text-align: left'>"
                    // + "<span style=\"font-family: 字体视界-小南同学;\">"
                    + "<br>课程名：" + courseName + "<br>"
                    + "教学班名：" + teachClassName + "<br>"
                    + "课程日期：" + lessonDate + "<br>"
                    + "课程时间：" + (courseType[e.index - 1][0]['name']).split("~")[0] + "\~"
                    + (courseType[e.index + e.length - 2][0]['name']).split("~")[1] + "<br>"
                    + "教学班开始时间：" + teachClassStartDate + "<br>"
                    + "教学班结束时间：" + teachClassEndDate
                    // + "</span>"
                    + "</p>", {
                        icon: 1
                        , skin: 'layui-layer-lan'
                        // , skin: 'layui-layer-molv'
                        , area: ['400px', '320px']
                        , anim: 1
                    });
                console.log(e);
                console.log(week.indexOf(e.week));
            },
        });
    }

    function showSample() {
        courseList = [
            ['大学英语(Ⅳ)@10203', '大学英语(Ⅳ)@10203', '', '', '', '', '毛概@14208', '毛概@14208', '', '', '', '选修'],
            ['', '', '信号与系统@11302', '信号与系统@11302', '模拟电子技术基础@16204', '模拟电子技术基础@16204', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', '', '', '', '', ''],
            ['', '', '', '', '电装实习@11301', '电装实习@11301', '', '', '', '大学体育', '大学体育', ''],
            ['', '', '数据结构与算法分析', '数据结构与算法分析', '', '', '', '', '信号与系统', '信号与系统', '', ''],
            ['大学体育(Ⅳ)', '大学体育(Ⅳ)', '形势与政策(Ⅳ)@15208', '形势与政策(Ⅳ)@15208', '', '', '电路、信号与系统实验', '电路、信号与系统实验', '', '', '', ''],
            ['', '', '', '', '电装实习@11301', '电装实习@11301', '', '', '', '大学体育', '大学体育', ''],
        ];
        Timetable.setOption({
            timetables: courseList,
            week: week,
            styles: {
                palette: ['#dedcda', '#ff4081']
            },
            timetableType: courseType,
            gridOnClick: function (e) {
                console.log(e);
            }
        });
    }

    function setPageNumber(pageNumber) {
        document.getElementById("currWeek").innerText = "第" + pageNumber + "周";
    }
</script>
</html>
